 <#import "inc/macro-page.html" as panel>
<#import "macro-filter-card-box.html" as seachpanel>
<#escape x as x?html>
<@panel.header "九宫格分类结构预警" "">
</@panel.header>
<@panel.body>
<!-- Bread crumb -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3>九宫格分类结构预警</h3> </div>
    <div class="col-md-7 align-self-center">
        <div class="page-nav-bar">
           <button class="btn btn-inverse btn-click-bind" data-sign="11" disabled>九宫格分类分析</button>
           <button class="btn btn-info btn-click-bind" data-sign="12">九宫格发展策略</button>
        </div>
    </div>
</div>
<!-- End Bread crumb -->
<!-- Container fluid  -->
<div class="container-fluid">
    <!-- Start Page Content -->
         <div class="row">
             <div class="col-lg-12">
                 <div class="card">
					<div class="custom-card-header quick-bar">
						<div class="hint">&nbsp;</div>
					    <@seachpanel.filterbox></@seachpanel.filterbox>
					    <button id="id-export-file" type="button" class="btn btn-dark btn-outline btn-sm m-l-10" title="导出"><i class="fa fa-share-square-o"></i></button>
					</div>

                     <div class="card-body">
	                   <div id="id-sudoku-diagram" class="row m-t-20">
	                   	<div class="col-lg-7">
	                   	      <div class="row sudoku">
	                   	      	<div class="col-lg-4 stat-pass-bg">
	                   	      		<div class="sudoku-box" id="c1r1" data-index="3">
	                   	      			<h4 class="sudoku-title">一般</h4>
	                   	      			<div class="sudoku-info">无</div>
	                   	      		</div>
	                   	      	</div>
	                   	      	<div class="col-lg-4 stat-excellent-bg">
	                   	      		<div class="sudoku-box" id="c1r2" data-index="6">
	                   	      			<h4 class="sudoku-title">优秀</h4>
	                   	      			<div class="sudoku-info">50%，4人</div>
	                   	      		</div>
	                   	      	</div>
	                   	      	<div class="col-lg-4 stat-outstanding-bg">
	                   	      		<div class="sudoku-box" id="c1r3" data-index="9">
	                   	      			<h4 class="sudoku-title">卓越</h4>
	                   	      			<div class="sudoku-info">25%，2人</div>
	                   	      		</div>
	                   	      	</div>

	                   	      	<div class="col-lg-4 stat-pass-bg">
	                   	      		<div class="sudoku-box" id="c2r1" data-index="2">
	                   	      			<h4 class="sudoku-title">一般</h4>
	                   	      			<div class="sudoku-info">无</div>
	                   	      		</div>
	                   	      	</div>
	                   	      	<div class="col-lg-4 stat-good-bg">
	                   	      		<div class="sudoku-box" id="c2r2" data-index="5">
	                   	      			<h4 class="sudoku-title">良好</h4>
	                   	      			<div class="sudoku-info">12.5%，1人</div>
	                   	      		</div>
	                   	      	</div>
	                   	      	<div class="col-lg-4 stat-excellent-bg">
	                   	      		<div class="sudoku-box" id="c2r3" data-index="8">
	                   	      			<h4 class="sudoku-title">优秀</h4>
	                   	      			<div class="sudoku-info">12.5%，1人</div>
	                   	      		</div>
	                   	      	</div>

	                   	      	<div class="col-lg-4 stat-bad-bg">
	                   	      		<div class="sudoku-box" id="c3r1" data-index="1">
	                   	      			<h4 class="sudoku-title">不合格</h4>
	                   	      			<div class="sudoku-info">无</div>
	                   	      		</div>
	                   	      	</div>
	                   	      	<div class="col-lg-4 stat-pass-bg">
	                   	      		<div class="sudoku-box" id="c3r2" data-index="4">
	                   	      			<h4 class="sudoku-title">一般</h4>
	                   	      			<div class="sudoku-info">无</div>
	                   	      		</div>
	                   	      	</div>
	                   	      	<div class="col-lg-4 stat-good-bg">
	                   	      		<div class="sudoku-box" id="c3r3" data-index="7">
	                   	      			<h4 class="sudoku-title">良好</h4>
	                   	      			<div class="sudoku-info">无</div>
	                   	      		</div>
	                   	      	</div>
	                   	      </div>
	                   	</div>
	                   	<div class="col-lg-5 sudoku-remark" id="r5">
	                   		<p>　　办公室员工整体专业化能力表现相对较强，87.5%以上的员工在专业能力上表现相对较高；A+档卓越员工数量为25%（2人），A档优秀员工数量有62.5%（5人），表现优秀的员工数量充足，远高于管理通用要求（卓越员工不少于5%，优秀员工不少于10%）。</p>
	                   		<p>　　在未来需要降低B档5格良好和A档8格优秀的员工占比，进一步提升A档6格的优秀员工数量，将更多的A档6格员工发展为A+档9格的优秀员工。</p>
	                   	</div>
	                    </div>
                     </div>
                 </div>
             </div>
         </div>
         <!-- End PAge Content -->
</div>
<!-- End Container fluid  -->
</@panel.body>
<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/plugins/alangyun-filterbox.js"></script>
<script type="text/javascript">
	// word导出事件
	document.getElementById('id-export-file').addEventListener('click', function() {
		// Ensure echarts charts have finished rendering
		setTimeout(() => {
			var charts = document.querySelectorAll('canvas');
			charts.forEach(chart => {
				var dataURL = chart.toDataURL();
				var imgTag = '<img src="' + dataURL + '" />';
				chart.insertAdjacentHTML('beforebegin', imgTag);
				chart.style.display = 'none'; // Hide the original canvas
			});

			// Create a temporary container for the export
			var exportContainer = document.createElement('div');
			exportContainer.id = 'export-container';
			exportContainer.style.width = '100%';
/*
                        // Clone the diagram
                        var chartContainer = document.getElementById('id-sudoku-diagram').cloneNode(true);

                        // Apply inline styles directly to the cloned elements
                        chartContainer.querySelectorAll('.stat-excellent-bg').forEach(function(cell) {
                            cell.style.color = '#fff';
                            cell.style.backgroundColor = '#A4CE9D';
                        });
                        chartContainer.querySelectorAll('.stat-outstanding-bg').forEach(function(cell) {
                            cell.style.color = '#fff';
                            cell.style.backgroundColor = '#67AD5B';
                        });
                        chartContainer.querySelectorAll('.stat-good-bg').forEach(function(cell) {
                            cell.style.color = '#fff';
                            cell.style.backgroundColor = '#58a2eb';
                        });
                        chartContainer.querySelectorAll('.stat-pass-bg').forEach(function(cell) {
                            cell.style.color = '#fff';
                            cell.style.backgroundColor = '#ffa206';
                        });
                        chartContainer.querySelectorAll('.stat-bad-bg').forEach(function(cell) {
                            cell.style.color = '#fff';
                            cell.style.backgroundColor = '#ef5350';
                        });
                        chartContainer.querySelectorAll('.stat-inverse-bg').forEach(function(cell) {
                            cell.style.color = '#fff';
                            cell.style.backgroundColor = '#6a707e';
                        });
                        chartContainer.querySelectorAll('.sudoku').forEach(function(cell) {
                            cell.style.padding = '0 15px';
                        });
                        chartContainer.querySelectorAll('.col-lg-4').forEach(function(cell) {
                            cell.style.borderRight = '1px solid #fff';
                            cell.style.borderBottom = '1px solid #fff';
                        });
                        chartContainer.querySelectorAll('.sudoku-box').forEach(function(cell) {
                            cell.style.display = 'flex';
                            cell.style.alignItems = 'center';
                            cell.style.flexDirection = 'column';
                            cell.style.padding = '30px 15px';
                            cell.style.minHeight = '100px';
                        });

                        chartContainer.querySelectorAll('.sudoku-title').forEach(function(cell) {
                            cell.style.color = '#fff';
                            cell.style.marginBottom = '1rem';
                        });
                        chartContainer.querySelectorAll('.sudoku-remark').forEach(function(cell) {
                            cell.style.padding = '30px 15px';
                            cell.style.backgroundColor = '#58a2eb39';
                        });
                        chartContainer.querySelectorAll('.row').forEach(function(cell) {
                            cell.style.display = 'flex';
                            cell.style.flexWrap = 'wrap';
                            cell.style.marginRight = '-15px';
                            cell.style.marginLeft = '-15px';
                        });*/
			// 创建一个新的表格元素
			var table = document.createElement('table');
			table.style.borderCollapse = 'collapse'; // 设置表格边框合并

			// 创建表格的行和列
			for (var i = 0; i < 3; i++) {
				var row = document.createElement('tr');

				for (var j = 0; j < 5; j++) {
					// 创建单元格
					var cell = document.createElement('td');
					cell.style.border = '1px solid #fff'; // 单元格边框样式
					cell.style.padding = '8px'; // 单元格内边距
					cell.style.color = '#fff'; // 设置字体颜色
					cell.textContent = ''; // 设置内容

					// 设置具体单元格的背景色
					if (j === 0 && i === 0) {
						cell.style.backgroundColor = '#ffa206'; // 第1列的第1行
						cell.innerHTML = document.getElementById('c1r1').innerHTML;
					} else if (j === 0 && i === 1) {
						cell.style.backgroundColor = '#ffa206'; // 第1列的第2行
						cell.innerHTML = document.getElementById('c2r1').innerHTML;
					} else if (j === 0 && i === 2) {
						cell.style.backgroundColor = '#ef5350'; // 第1列的第3行
						cell.innerHTML = document.getElementById('c3r1').innerHTML;
					} else if (j === 1 && i === 0) {
						cell.style.backgroundColor = '#A4CE9D'; // 第2列的第1行
						cell.innerHTML = document.getElementById('c1r2').innerHTML;
					} else if (j === 1 && i === 2) {
						cell.style.backgroundColor = '#ffa206'; // 第3行第2列
						cell.innerHTML = document.getElementById('c3r2').innerHTML;
					} else if (j === 2 && i === 1) {
						cell.style.backgroundColor = '#A4CE9D'; // 第3列的第2行
						cell.innerHTML = document.getElementById('c2r3').innerHTML;
					} else if (j === 1 && i === 1) {
						cell.style.backgroundColor = '#58a2eb'; // 第2列的第2行
						cell.innerHTML = document.getElementById('c2r2').innerHTML;
					} else if (j === 2 && i === 2) {
						cell.style.backgroundColor = '#58a2eb'; // 第3列的第3行
						cell.innerHTML = document.getElementById('c3r3').innerHTML;
					} else if (j === 2 && i === 0) {
						cell.style.backgroundColor = '#67AD5B'; // 第3列的第1行
						cell.innerHTML = document.getElementById('c1r3').innerHTML;
					}

					// 合并第4列和第5列
					if (j === 3 && i === 0) {
						cell.rowSpan = 3; // 合并三行
						cell.style.backgroundColor = '#fff'; // 合并后的第4列背景色
						cell.textContent = ''; // 设置内容
						row.appendChild(cell); // 将单元格添加到行中
					} else if (j === 4 && i === 0) {
						cell.rowSpan = 3; // 合并三行
						cell.style.backgroundColor = '#daeafb'; // 合并后的第5列背景色
						cell.style.color = '#000'; // 设置字体颜色
						cell.style.verticalAlign = 'top';
						cell.innerHTML = document.getElementById('r5').innerHTML;
						row.appendChild(cell); // 将单元格添加到行中
					} else if (j < 3) {
						row.appendChild(cell); // 将其他单元格添加到行中
					}
				}

				table.appendChild(row); // 将行添加到表格中
			}

			document.body.appendChild(table); // 将表格添加到页面中

			// exportContainer.appendChild(chartContainer);
			exportContainer.appendChild(table);

			// Convert the export container's HTML to a Word document
			var htmlHeader = `
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
            <style>
               table, th, td {
                   text-align: center;
                   border-collapse: collapse;
               }
            </style>
          </head>
          <body>`;
			var htmlFooter = `
          </body>
          </html>`;
			var htmlContent = htmlHeader + exportContainer.innerHTML + htmlFooter;
			var blob = new Blob([htmlContent], { type: 'application/msword' });
			var url = URL.createObjectURL(blob);
			var a = document.createElement('a');
			a.href = url;
			a.download = '九宫格分类分析.doc';
			a.click();
			URL.revokeObjectURL(url);

			// Clean up by removing the temporary container
			exportContainer.remove();

			// Revert changes made to the document for export
			charts.forEach(chart => {
				chart.previousSibling && chart.previousSibling.remove();
				chart.style.display = 'block'; // Restore the original canvas
			});
		}, 1000); // Adjust the timeout as needed to ensure charts have rendered
	});
$(document).ready(function(){

	$(".btn-click-bind").click(function() {
		  var val = $(this).data("sign");
		  var ctx = "/t/sudoku";
		  if(12===val){
			  ctx = "/t/sudoku12";
		  }
		  window.location.href="${ROOT}" + ctx;
	});

	var convertDataToView = function(allData){
		allData.forEach(data=>{
		$(".sudoku-remark").html("<p>"+data.remark+"</p>");
		$(".sudoku .sudoku-box").toArray().forEach(box=>{
			var index = parseInt($(box).data("index"));
			var item = data.sudoku[index-1];
			var dom = $(box).find(".sudoku-info");

			if(item && dom) {
				if(item.count && item.count > 0){
					dom.text(item.percent+" "+ item.count+"人");
				}else {
					dom.text("无");

				}
			} else {
				dom.text("无");
			}
		});
		});
	}

    //初始化过滤面板
    $.post('${ROOT}/t/treeNav',function(data, status){
    	if(data.code==="ok"){
			$.fn.filterBox({
				data: data.data,
				onsubmit: function(form, data){
				    $.post('${ROOT}/t/sumsudoku11',data,function(data, status){
				    	if(data.code==="ok"){
				    		if(data.data){
				    			convertDataToView(data.data);
					    	}else{
					    		toastr.error("未查到任何资料");
					    	}
				    	}else{
				    		toastr.error(data?data.desc:"提取九宫格信息失败")
				    	}
				    }, 'json');
				}
			})
    	}
    });
    // 导出事件绑定
    // $('#id-export-file').click(function(){
    // 	var pdfCanvas = $.fn.pdfcanvas({
    // 		title: '九宫格分类结构预警 - 分类分析',
    // 		keywords: '单位和部门：；岗位类别：'
    // 	})
    // 	pdfCanvas.addDom(document.getElementById("id-sudoku-diagram"));
    // 	pdfCanvas.print();
    //
    // });

    //先提取数据
    $.post('${ROOT}/t/lstsudoku11',function(data, status){
    	if(data.code==="ok"){
    		if(data.data){
    			convertDataToView(data.data);
	    	}else{
	    		toastr.error("未查到任何资料");
	    	}
    	}else{
    		toastr.error(data?data.desc:"提取九宫格信息失败")
    	}
    }, 'json');



});
</script>
</@panel.footer>
</#escape>
